jQuery(function ($) {
    $(".comment-reply-item").on('click', function () {
        let to = $(this).attr('reply');
        let comment_id = $(this).attr('comment_id');
        $('#submit').attr('comment_id', comment_id);
        $('#reply-title').html('发表评论 - <span style="color: #ec6a2a">@' + to + '</span>');
    });
});

function reply() {
    jQuery("#submit").attr('disabled', true);
    let page_id = jQuery('#submit').attr('page_id');
    let comment_id = jQuery('#submit').attr('comment_id');
    let author = jQuery('#author').val();
    let email = jQuery('#email').val();
    let comment = jQuery('#comment').val();
    jQuery.ajax({
        type: "POST",
        url: "/article/reply",
        dataType: 'json',
        data: {'page_id': page_id, 'comment_id': comment_id, 'comment': comment, 'author': author, 'email': email},
        success: function (res) {
            if (res.result.success) {
                new NoticeJs({
                    text: res.content.message,
                    type: 'success',
                    position: 'topCenter',
                    progressBar: true,
                    timeout: 30,
                    animation: {
                        open: 'animated fadeIn',
                        close: 'animated flipOutX'
                    }
                }).show();
                jQuery('#author').val('');
                jQuery('#email').val('');
                jQuery('#comment').val('');
                jQuery("#submit").attr('comment_id', 0);
                jQuery('#reply-title').html('发表评论');
                if(res.content.comment){
                    let item = res.content.comment;
                    let html = '';
                    html += '<li class="comment even thread-even depth-1">\n' +
                        '                                <article class=comment-article>\n' +
                        '                                    <div class=comment-body>\n' +
                        '                                        <header class=comment-meta>\n' +
                        '                                            <div class="comment-author akea-title-font">' + item.nickname + '</div>\n' +
                        '                                            <div class="comment-time akea-info-font">' + item.created_at + '</div>\n' +
                        '                                            <div class="comment-reply">\n' +
                        '                                                <a href="#reply-comment" class="comment-reply-item" reply="' + item.nickname + '" comment_id="' + item.id + '">回复</a>\n' +
                        '                                            </div>\n' +
                        '                                        </header>\n' +
                        '                                        <section class=comment-content>\n';

                    if (item.parent_id != 0) {
                        html += '<span style="color: #ec6a2a; font-size: 16px;">@' + item.parent_nickname + '</span>\n' +
                            '                                                <div class="quote">\n' +
                            '                                                    <i class="fa fa-quote-left"></i><br>\n' +
                            '                                                    <p style="text-indent: 20px">' + item.parent_comment + '</p>\n' +
                            '                                                </div>\n';
                    }

                    let end = '                                            <p>' + item.comment + '</p>\n' +
                        '                                        </section>\n' +
                        '                                    </div>\n' +
                        '                                </article>\n' +
                        '                            </li>';
                    html += end;
                    jQuery(".comment-list").prepend(html);
                    let scroll = jQuery(".comment-list").offset();
                    jQuery('html').animate({scrollTop: (scroll.top - 200)}, 600);
                    jQuery(".comment-list li").eq(0).flash( '#ffd', 3000 );
                    jQuery(".comment-reply-item").on('click', function () {
                        let to = jQuery(this).attr('reply');
                        let comment_id = jQuery(this).attr('comment_id');
                        jQuery('#submit').attr('comment_id', comment_id);
                        jQuery('#reply-title').html('发表评论 - <span style="color: #ec6a2a">@' + to + '</span>');
                    });
                }
            } else {
                new NoticeJs({
                    text: res.result.error_msg,
                    type: 'warning',
                    position: 'topCenter',
                    progressBar: true,
                    timeout: 30,
                    animation: {
                        open: 'animated fadeIn',
                        close: 'animated fadeOut'
                    }
                }).show();
            }
            jQuery("#submit").attr('disabled', false);
        }
    });
    return false;
}

function getComment() {
    jQuery("#page-comment-more").attr('disabled', true);
    let page_id = jQuery("#page-comment-more").attr('page_id');
    let offset = jQuery("#page-comment-more").attr('offset');
    let end = jQuery("#page-comment-more").attr('end');
    if (end != 'on') {
        jQuery.ajax({
            type: "POST",
            url: "/article/reply_more",
            dataType: 'json',
            data: {'page_id': page_id, 'offset': offset},
            success: function (res) {
                if (res.result.success) {
                    let html = '';
                    jQuery.each(res.content.comments, function (index, item) {
                        html += '<li class="comment even thread-even depth-1">\n' +
                            '                                <article class=comment-article>\n' +
                            '                                    <div class=comment-body>\n' +
                            '                                        <header class=comment-meta>\n' +
                            '                                            <div class="comment-author akea-title-font">' + item.nickname + '</div>\n' +
                            '                                            <div class="comment-time akea-info-font">' + item.created_at + '</div>\n' +
                            '                                            <div class="comment-reply">\n' +
                            '                                                <a href="#reply-comment" class="comment-reply-item" reply="' + item.nickname + '" comment_id="' + item.id + '">回复</a>\n' +
                            '                                            </div>\n' +
                            '                                        </header>\n' +
                            '                                        <section class=comment-content>\n';

                        if (item.parent_id != 0) {
                            html += '<span style="color: #ec6a2a; font-size: 16px;">@' + item.parent_nickname + '</span>\n' +
                                '                                                <div class="quote">\n' +
                                '                                                    <i class="fa fa-quote-left"></i><br>\n' +
                                '                                                    <p style="text-indent: 20px">' + item.parent_comment + '</p>\n' +
                                '                                                </div>\n';
                        }

                        let end = '                                            <p>' + item.comment + '</p>\n' +
                            '                                        </section>\n' +
                            '                                    </div>\n' +
                            '                                </article>\n' +
                            '                            </li>';
                        html += end;
                    });
                    jQuery(".comment-list").append(html);
                    jQuery("#page-comment-more").attr('offset', res.content.offset);
                    if (res.content.total < 5) {
                        jQuery("#page-comment-more").html('已经到底啦');
                        jQuery("#page-comment-more").attr('end', 'on');
                    }
                    jQuery("#page-comment-more").attr('disabled', false);

                    jQuery(".comment-reply-item").on('click', function () {
                        let to = jQuery(this).attr('reply');
                        let comment_id = jQuery(this).attr('comment_id');
                        jQuery('#submit').attr('comment_id', comment_id);
                        jQuery('#reply-title').html('发表评论 - <span style="color: #ec6a2a">@' + to + '</span>');
                    });
                }
            }
        });
    }
}

jQuery.fn.flash = function (color, duration) {
    let current = this.css('background-color');
    this.animate({'background-color': color}, duration / 2);
    this.animate({'background-color': current}, duration / 2);
}